import React, { useState, useEffect } from 'react';
import { Text, Modal } from 'react-native';
import {
  List,
  Toast,
  Flex,
  Button,
  Card,
  Tabs,
  Badge,
} from '@ant-design/react-native';
import { LoadingContainer } from '@/rcomponents/Container';
import UserStore from '@/stores/userStore';
import ApiClient from '@/services/apiClient';
import FlexTextField from '@/rcomponents/flexTextField';

function PromptRiskPage({ navigation, route }) {
  const userStore = UserStore.useStore();
  const [tipsData, setTips] = useState([]);

  useEffect(() => {
    handleListLoad();
  }, []);

  const handleListLoad = async () => {
    const res = await ApiClient.post('jcJobcardTips/v1/list', {
      jcImplementerUser: userStore.user.LoginName,
      jcStepId: parseInt(route.params.id.slice(1)),
      jcCardId: parseInt(route.params.id.slice(0)),
    });
    if (res.errorMsg) {
      Toast.fail(res.errorMsg);
      return;
    }
    setTips(
      res.data.map((item, index) => {
        return {
          // key: item.jcCardId.concat(item.jcStepId),
          key: index + 1,
          jcType: item.jcType,
          jcFileName: item.jcFileName,
          jcContent: item.jcContent,
          jcTypeNumber: item.jcTypeNumber,
        };
      }),
    );
  };
  return (
    <LoadingContainer
      loading={handleListLoad.loading}
      onRefresh={handleListLoad}
      data={tipsData}
      renderItem={({ item }) => (
        <List>
          <Card>
            <Card.Body style={{ paddingLeft: 10 }}>
              <Flex>
                <FlexTextField label="序号" fieldValue={item.key} />
              </Flex>
              <Flex>
                <FlexTextField label="类型" fieldValue={item.jcType} />
              </Flex>
              <Flex>
                <FlexTextField label="编号" fieldValue={item.jcTypeNumber} />
              </Flex>
              <Flex>
                <FlexTextField label="内容" fieldValue={item.jcContent} />
              </Flex>
              <Flex>
                <FlexTextField label="关联文件" fieldValue={item.jcFileName} />
              </Flex>
            </Card.Body>
          </Card>
        </List>
      )}
    />
  );
}

PromptRiskPage.routeName = 'PromptRisk';
PromptRiskPage.permission = 'RPromptRisk';
export default PromptRiskPage;
